<template>
	<view class="bind">
		<view class="kuang">
			<view class="kuangl">
				<view class="">真实姓名</view>
				<view class="xian">|</view>
			</view>
			<view class="kuangr">
				<input v-model="name" placeholder="输入支付宝真实姓名" />
			</view>
		</view>
		<view class="kuang">
			<view class="kuangl">
				<view class="">账号 </view>
				<view class="xian">|</view>
			</view>
			<view class="kuangr">
				<input v-model="phone" placeholder="输入支付宝账号" />
			</view>
		</view>
		<view class="btn" @click="btnclick">确定</view>
	</view>
</template>

<script>
	import {Api} from "../../service/api";
	export default {
		data() {
			return {
				name:"",
				phone:"",
			}
		},
		created() {
			this.getinfor()
		},
		methods: {
			getinfor(){
				Api.getAlipayInfo().then(res=>{
					this.name = res.data.realName
					this.phone = res.data.alipayAccount
				})
			},
      async	btnclick(){
        if(this.name.trim().length === 0 || this.phone.trim().length === 0){
          uni.showToast({
            title: '请输入完整信息',
            icon: 'none',
            duration: 2000
          });
          return
        }
        // let regex = /^1[3456789]\d{9}$/
        // if (!regex.test(this.phone)) {
        //   uni.showToast({
        //     title: '请输入正确的手机号',
        //     icon: 'none'
        //   })
        //   return
        // }
				await Api.updateUserInfo({
					realName: this.name,
					alipayAccount: this.phone
				})
        uni.showToast({
          title: '保存成功',
          icon: 'none',
        });
        setTimeout(()=>{
          uni.navigateBack()
        },1200)
			}
		}
	}
</script>

<style>
page{
  background-color: #f5f5f5;
}
</style>

<style lang="scss" scoped>
	.bind{
		padding: 0 28rpx;
		// background-color: #F1F7FC;
		// height: 100vh;
		overflow: hidden;
	}
	.kuang{
		background-color: #FFFFFF;
		padding: 40rpx 20rpx;
		display: flex;
		align-items: center;
		margin-top: 24rpx;
		font-size: 28rpx;
		font-weight: 700;
    border-radius: 20rpx;
		.kuangl{
			width: 200rpx;
			display: flex;
			justify-content: space-around;
			.xian{
				margin: 0 26rpx;
			}
		}
	}
	.btn{
		width: 580rpx;
		height: 88rpx;
		background-color: #E81F4B;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
    border-radius: 208rpx;
    margin: 46rpx auto 0;
  }
</style>
